<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
.im{
  width: 4vh;
  height: 4vh;
}
.zhong{
  font-size: 28px;
  font-weight: 700;
}
.wen{
  font-size: 18px;
  color: aquamarine;
  box-sizing: border-box;
  padding-top: 8px;
}

.row{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  width: 40vw;
  height: 5vh;
  box-sizing: border-box;
  padding: 3px;
}

.row2{
  display: flex;
  justify-content:center;
  width: 25vw;
  height: 25vw;
  box-sizing: border-box;
padding-top: 3vw;
padding-bottom: 1vw;
}

.row3{
  width: 40vw;
  display: flex;
  justify-content:center;
}

.text{
  color: aqua;
  font-size: 28px;
  font-weight: 650;
}

.text1{
  font-size: 26px;
  font-weight: 650;
  padding-bottom: 2vw;
}

.row4{
  width: 32vw;
  display: flex;
  justify-content:center;
  border-top: 1px solid #999;
  box-sizing: border-box;
  padding-bottom: 5px;
}

.tu{
  width: 4vw;
  height: 4vw;
  padding-top: 1vw;
  padding-right: 2vw;
}

.row5{
  display: flex;
  justify-content:center;
  width: 40vw;
  height: 10vh;
  box-sizing: border-box;
  padding-left: 4vw;
  padding-right: 4vw;
  margin-bottom: 8px;
}

.text2{
  padding-top: 0.7vw;
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 1vw;
}

.text3{
  font-size: 20px;
  color:#999;
}

.text4{
  flex: 1;
}

.tu1{
  width: 2vw;
  height: 2vw;
  align-self: center;
}

.bian{
  border: 1px solid brown;
  width: 40vw;
}
</style>
<body class="bian">
  <div class="row">
    <img src="./imgs/arrow-left.png" alt=""  class="im"></img>
    <div class="zhong">急速问诊</div>
    <div class="wen">问诊记录</div>
  </div>
  <div class="row3">
    <img src="./imgs/consult-fast.png" alt="" class="row2"></img>
  </div>
    <div class="row3">
      <span class="text">20S</span>
      <span class="text1">快速匹配专业医生</span>
    </div >
    <div class="row3">
      <span class="row4"></span>
    </div>
  <div class="row5">
    <img src="./imgs/doctor.png" alt="" class="tu">
    <div class="text4">
      <div class="text2">三甲图文问诊</div>
      <div class="text3">三甲主治及以上级别医生</div>
    </div>
    <img src="./imgs/arrow-right.png" alt="" class="tu1">
  </div>


  <div class="row3">
    <span class="row4"></span>
  </div>
<div class="row5">
  <img src="./imgs/message.png" alt="" class="tu">
  <div class="text4">
    <div class="text2">普通图文问诊</div>
    <div class="text3">二甲主治及以上级别医生</div>
  </div>
  <img src="./imgs/arrow-right.png" alt="" class="tu1">
</div>

</body>
</html>